<template>
    <div class="box">radio-group</div>

    <el-form-renderer label-width="100px" :content="content" ref="ruleForm">
    </el-form-renderer>
</template>
<script setup>
import { reactive } from "vue";
import elFormRenderer from "../components/femessage/el-form-renderer.vue";
const content = reactive([
    {
        id: 'city',
        type: 'radio-group',
        label: 'city',
        /**
         * sytle 属性是为了满足 el-radio-button属性而设置,如果不需要使用el-radio-button这可不设置
         */
        style: 'button',
        default: 'new york',
        options: [
            /**
             * el-radio 用 label 来做 v-model 的值
             * 这里会渲染成 <el-radio label="new york">new york</el-radio>
             */
            { label: 'new york' },
            // 这里会渲染成 <el-radio label="a">guangzhou</el-radio>
            { label: 'guangzhou', value: 'a' },
            { label: 'tokyo' },
        ]
    }
]);
</script>
<style scoped>
.box {
    margin: 20px 0;
    font-size: 20px;
}
</style>
